// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@import 'includes/base';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import "~@mozilla-protocol/core/protocol/css/templates/multi-column";
@import 'includes/dark-mode';
@import 'includes/mofo-donate-cta';

// Protocol override
.wnp-content-main .mzp-l-columns {
    display: grid; // keep gap on small screens when boxes stack
    gap: $layout-sm;
}

.wnp-main-title {
    margin-bottom: $layout-md;
    margin-inline: auto;
    max-width: $content-xl;
    text-align: center;
}

.c-box {
    background-color: $color-marketing-gray-10;
    border-radius: $border-radius-md;
    color: $color-black;
    display: grid;
    padding: $layout-sm;
}

.c-box-image {
    display: block;
    margin-bottom: $spacing-lg;
    width: 100%;
}

// extra specificity needed to override dark mode colors
h2.c-box-title {
    @include text-title-2xs;
    color: $color-black;
    margin-bottom: $spacing-sm;
}

.c-box-body {
    margin-bottom: $spacing-xl;
}

.c-box-body,
.c-box-cta {
    @include text-body-sm;
}

.c-box-cta {
    place-self: end start;
}
